<template>
	<view class="wrap" style="100vh">
		<js-error mode="bottom" ref="jsError"></js-error>
		<u-sticky class="u-sticky">
			<view class="cu-bar search" style="padding: 10px">
			  <u-search
			    v-model="barCode"
			    ref="uSearch"
			    :focus="focus"
			    placeholder="请先聚焦后扫描"
			    :show-action="false"
			    @search="confirm"
			  ></u-search>
			  <view style="margin-left: 10px; display: flex; flex-direction: column">
			    <u-icon @click="search" name="scan" size="50"></u-icon>
			  </view>
			</view>
		</u-sticky>
		<!-- -->
		<view v-if="flag">
			<!-- style="padding: 0 10px" -->
			<u-form ref="uForm" label-position="left" >
				<scroll-view
				  scroll-y="true"
				  :style="{ height: scrollViewHeight + 'px' }"
				  class="scroll-view-class"
				>
				<!-- class="bg-white  radius" -->
					<view class="bg-white margin" v-for="(item,index) in model" :key="index">
						<view  class="cu-form-group flex justify-between ">
							<view class="flex align-center">
								<view style="display: inline-block;padding: 5px;background: #3E97B0;color: #fff;min-width: 40px;text-align: center;font-style: italic;font-weight: bold">
									{{ index + 1  }}
								</view>
								<view class="text-xxl margin-left text-black">
									{{ item.code ? item.code : '' }}
								</view>
							</view>
							<!--  -->
							<!-- <view class="" v-if="item.lastNums.length>1">
								<text style="font-size: 35px;" class="cuIcon-squarecheck text-sl " :class="!item.lastNum ? 'text-red' : 'text-green'"></text>
							</view> -->
						</view>
						<u-form-item label="名称"  label-width="220" class="paddingForm">
							 {{ item.name? item.name : '' }}
						</u-form-item>
						<u-form-item label="工装代码"  label-width="220" class="paddingForm">
							{{ item.caddcode || ''}}
						</u-form-item>
						<u-form-item label="工装状态"  label-width="220" class="paddingForm">
							 <!-- <dictLabel :value="item.moldStatus" dict-type="bas_mold_status" ></dictLabel> -->
							 <dictLabel
							   :value="item.moldStatus"
							   dict-type="bas_mold_status"
							   :dict-list="dictList"
							   :fontSize="'30rpx'"
							 ></dictLabel>
						</u-form-item>						
						<u-form-item label="工装尾号" prop="lastNum" label-width="220" class="paddingForm">
							{{ item.lastnum || ''}}
						</u-form-item>
						<u-form-item label="流程节点" prop="bpmTaskName" label-width="220" class="paddingForm">
							{{ item.bpmTask && item.bpmTask.name || ''}}
						</u-form-item>
					</view>				
				</scroll-view>
				
				
				
			</u-form>
			<view class="cu-bar"></view>
			
		</view>
		<u-empty  style="height: 80vh;" text="请扫码现品票"  v-if="!flag"></u-empty>
		
		<view>
			<movable-area class="movable-area1">
				<movable-view class="movable-view" :x="x" :y="y" direction="all">
					<view @click="handleSearch" class="custom-style" style="width: 90px; height: 70px; color: #fff; border-radius: 10rpx;">
						<view style="font-size: 16px;display: flex; flex-direction: column;text-align: center;">
							<text class="cuIcon-scan text-xxls text-blue"></text>
							<view class="text-blue">现品票识别</view>
						</view>
					</view>
					
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import dictLabel from "@/pages/asd/components/dictLabel.vue";
	export default {
		components:{
			dictLabel
		},
		data() {
			const now = new Date();
			return {
				model: [],
				confirmIqty:'',
				smshow:false,
				focus:false,
				barCode: "",
				scrollViewHeight:0,
				formFooterHeight: 0,
				headerHeight: 0,
				x: 650, //x坐标
				y: 650, //y坐标
				flag:false,
				dictList:[],
				
			}
		},
		// 计算每一个item的模具尾号
		onReady() {
			
			
		},
		mounted() {
			
			
		  this.calculateScrollViewHeight();
		},
		onLoad() {
			this.getDictList()
		},
		methods:{
			getDictList() {
			  this.$u.api
			    .dictListData({ dictType: "bas_mold_status" })
			    .then((res) => {
			      this.dictList = res;
			    });
			},

			async calculateScrollViewHeight() {
			  	await this.$nextTick(); // 确保DOM更新完成
			  	const query = uni.createSelectorQuery().in(this);
				// 获取form-footer 的高度
				// query.select(".form-footer").boundingClientRect((rect) => {
				// 	if (rect && rect.height > 0) { // 确保rect有效且高度大于0
				// 		this.formFooterHeight = rect.height;
				// 	}
				// });
				query.select(".u-sticky").boundingClientRect((rect) => {
					if (rect && rect.height > 0) { // 确保rect有效且高度大于0
					this.headerHeight = rect.height;
					// 获取屏幕高度
					const systemInfo = uni.getSystemInfoSync();
					const screenHeight = systemInfo.windowHeight;
					// 计算scroll-view高度
					this.scrollViewHeight = screenHeight - this.headerHeight - 0 -80;
					console.log(this.scrollViewHeight, 'this.scrollViewHeight');
					} else {
					console.error('无法获取.u-sticky的高度或高度为0');
					}
				}).exec();
			},
			handleFocus() {
			  var _that = this;
			  _that.focus = false;
			  setTimeout(() => {
			    _that.focus = true;
			  }, 500);
			},
			confirm() {
				this.focus = false
				console.log(this.barCode, 'barCode')
				this.barcode1 = this.barCode
				this.commonSearch(this.barCode)
			},
			search() {
				var _that = this;
				_that.focus = false				
				
				var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
				mpaasScanModule.mpaasScan({
					// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
					'scanType':  ['qrCode','barCode'],
					// 是否隐藏相册，默认false不隐藏
					'hideAlbum': false,
					//ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文                       
					'language' : 'en',
					//相册选择照片识别错误提示(ios)
					'failedMsg': '未识别到二维码，请重试',
					//Android支持全屏需要设置此参数
					'screenType': 'full'              
				},
				async (ret) => {
					console.log('ret',ret)
					if(ret.resp_message == 'success'){
						_that.barCode = ret.resp_result;
						await _that.commonSearch(ret.resp_result)
					}
				})
				
			},
			async commonSearch(barCode) {
				let that = this
				//扫货位
				this.$u.api.asd.findMoldStatus({
					barCode,
				}).then(res => {
					if (res.result == 'true') {
						
						// 返回一个新的数组，res.list数组里面 lastNums的数组长度大于1，设置lastNum 为''，把basMold 里面的值平铺，并且lastNums的数组长度大于1，设置lastNum 为''
						this.model = res.data || []
						this.flag = true
						
						setTimeout(()=>{
							that.makeSound("cg");
						},500)
						// that.$u.toast('成功！');
					} else {
						setTimeout(()=>{
							that.makeSound("sb");
						},500)
						that.$refs.jsError.showError('', res.message, 'error');
					}
					setTimeout(() => {
						this.barCode = '';
					}, 500);
					if(this.vuex_config.deviceType === this.vuex_config.deviceTypePDA){
						this.handleFocus()
					}
							
				})
			
				setTimeout(() => {
					this.barCode = '';
				}, 500);
			
			},
			makeSound(name){
				console.log("=====testClick=====");
				let src = '/static/'+name+'.mp3';
				//实例化声音  
				const Audio = uni.createInnerAudioContext();
				Audio.autoplay = true;
				Audio.src = src; //音频地址  
				Audio.play(); //执行播放  
				Audio.onError((res) => {
				});
				Audio.onPause(function() {
					console.log('end');
					Audio.destroy();
				});
			},
			
		}
	}
</script>

<style  lang="scss">
	$all_width: 96rpx;
	$all_height: 96rpx;
	.movable-area1 {
	  z-index: 999;
	  height: 97vh;
	  width: 650rpx;
	  position: fixed;
	  right: $all_width;
	  top: -($all_height + 70rpx);
	  pointer-events: none; //此处要加，鼠标事件可以渗透
	
	  .movable-view {
	    width: $all_width;
	    height: $all_height;
	    pointer-events: auto; //恢复鼠标事件
	
	    image {
	      width: $all_width;
	      height: $all_height;
	    }
	  }
	}
	.cuIcon-titles{
		color:#0081ff;
		font-size: 50rpx;
	}
	.paddingForm{
		padding: 18rpx 28rpx;
	}
	.text-xxls{
		font-size: 60rpx;
	}
	.select-date-prompt{
		font-size: 28rpx;
		color: #dfdfdf !important;
	}
	.cu-bar.foot{
		z-index: 100;
	}
	.form-footer{
		margin: 0;
	}
	.picker {
	  padding: 10px;
	  background-color: #fff;
	  text-align: center;
	}
</style>